<template>
    <div class="reg-box">
        <div class="bj">
            <van-nav-bar
            title="新用户注册"
            left-text="返回"
            left-arrow
            @click-left="logEvt"
            />
            <h2>欢迎注册</h2>
            <van-form ref="node">
                <van-cell-group inset>
                    <van-field
                    v-model="userReg.name"
                    name="username"
                    label="用户名"
                    placeholder="请填写用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                    v-model="userReg.password"
                    name="password"
                    label="密码"
                    placeholder="请填写密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <van-field
                    v-model="phone"
                    name="phone"
                    label="手机号"
                    placeholder="请填写手机号"
                    :rules="[{ required: true, message: '手机号错误', pattern: /^1[3-9]{1}[0-9]{9}$/ }]"
                    />
                    <van-field
                    v-model="userReg.code"
                    name="code"
                    label="验证码"
                    placeholder="请填写验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]"
                    >
                        <template #button>
                            <van-button size="small" color="#333333" @click="codeEvt">{{ codeMsg }}</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button class="btn" round block type="primary" native-type="submit" @click="submitEvt">
                    注册
                    </van-button>
                </div>
            </van-form>
        </div>
        <div class="right">@copy-rigth,chaofugou,2025-11-17</div>
    </div>
</template>

<script lang="ts" setup>
import { ref, Ref } from 'vue';
import router from '../../router';
import { showToast } from 'vant';
import { userRegisterApi } from '../../apis/userApi';
import { phone, codeEvt, codeMsg, set } from './codeEvt';

const userReg:Ref<userReg> = ref({
    id: '',
    name: '',
    password: '',
    code: ''
})

/** 登录页 */
function logEvt() {
    router.push('/login')
    clearTimeout(set.value)
    codeMsg.value = '获取验证码'
}
/** 表单验证 */
const node = ref()
function submitEvt() {
    node.value.validate().then(() => {
        if(userReg.value.code !== localStorage.getItem('code')) {
            showToast('验证码错误')
            userReg.value.code = ''
            return
        } else {
            registerEvt()
        }
    })
}

/** 用户注册 */
async function registerEvt() {
    let res = await userRegisterApi({
        ...userReg.value,
        id: userReg.value.phone,
        token: userReg.value.code
    })
    if(res.code === 200) {
        showToast('注册成功')
        router.push('/login')
    } else {
        showToast(res.message)
    }
}

</script>

<style lang="less" scoped>
@import '../../style/common.less';

.reg-box {
    width: 100vw;
    height: 100vh;
    background: url('../../images/bj.png') no-repeat center center / 100% 100%;

    .bj {
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, @g1, @r1);
        position: fixed;
        text-align: center;

        .van-nav-bar {
            background: transparent;
        }

        h2 {
            margin-top: 160px;
            background: linear-gradient(to right, @g5, @c3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .van-form {
            margin-top: 20px;
            padding: 0 10px;

            .van-cell-group {
                background: transparent;

                .van-field {
                    background: transparent;
                    border-bottom: 1px solid @c1;
                    font-size: 20px;
                    margin-bottom: 20px;
                    font-weight: bolder;
                    align-items: center;
                }
            }

            .btn {
                background: linear-gradient(to right, @g5, @c3);
                border: none;
                border-radius: 10px;
                letter-spacing: 4px;
            }
        }
    }
}

::v-deep &::-webkit-input-placeholder {
    color: @c2;
    font-size: 16px;
    font-weight: normal;

}

::v-deep .van-field__label {
    width: 68px;
}
</style>